【IT168专稿】在上一篇中，我们讨论了如何创建Sketch Flow项目和导入各种类型的游戏原型中所需要的图像资源文件等基础性内容。在本篇中，我们将讨论使用SketchFlow Map规划游戏主要模块、使用SketchFlow Map来创建可重用的组件屏幕和实现各屏幕间的导航等问题。

　　一、使用SketchFlow Map规划游戏主要模块

　　SkethFlow的地图面板是由文件Sketch.map提供的，此文件本质上也是一个XAML文件。

　　初始时的地图面板界面中仅有一个屏幕组件，而且文件Screen 1.xaml自动打开。

　　图1. 初始时的地图面板界面

　　通过操作地图面板，我们可以轻松地创建其他的屏幕组件、普通的可重用组件并创建它们之间的导航关系。

　　首先，请注意当鼠标移动到屏幕组件Screen 1上时的现象。在Screen 1按钮的下部出现四个小图标，分别用于创建一个新的与当前屏幕具有导航关系的屏幕组件、连接到一个已知的屏幕组件、创建并插入一个可重用的组件屏幕和修改当前按钮组件的可视化标记(颜色)。其中，可视化标记用于标记当前屏幕或组件的颜色，用于直观地指出当前屏幕或组件与其他屏幕的关系。

　　图2. 当鼠标移动到Screen 1上时在其下部出现四个小图标

　　其中，名称Screen 1可以重命名，以便更准确地标记当前屏幕。

　　拖动左边第一个小图标可以轻松地创建与此屏幕具有导航关系的其他屏幕。同时，新创建的当前屏幕被打开，如图9所示。

　　图3. 使用拖动方式创建与此屏幕具有导航关系的其他屏幕

　　除了使用上述方式外，你还可以通过在空白处单击右键使用弹出的快捷菜单或正文地图面板下部的小图标来实现上述功能。

　　接下来，我们来讨论如何利用Assets面板上的众多样式组件粗略地绘制一个屏幕。首先，把名称Screen 1重命名为Start，并且双击这个屏幕组件，使之成为当前屏幕。

　　系统提供了大量的常规使用SketchStyle控件，几乎对应于所有常用的Silverlight控件。切换到Assets面板，从其下选择Styles—SketchStyles。

　　【提示】在项目规则的后期正式开发之前，你可以把这些样式控件转换成标准的Silverlight控件。

　　你会注意到，右侧列出了33个样式组件，如图10所示。

　　图4. Microsoft Expression Blend 3内置了33个常用的样式组件以方便屏幕原型设计

　　你可以像操作标准的Silverlight控件一样把这些样式控件拖动到SketchFlow屏幕上。图11展示了把一个TitleCenter-Sketch和一个Button-Sketch拖放到屏幕Start上并导入一幅Adobe Illustrator矢量图形文件后的结果。

　　图5. 使用样式组件和Adobe Illustrator矢量图形设计屏幕Start